<template>
  <el-container style="height:800px">
       <el-aside width="200px"  style="background-color: #f1f1f1;">
            <draggable
                :list="state.modules.arr1"
                ghost-class="ghost"
                handle=".move"
                filter=".forbid"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onStart"
                @end="onEnd"
                :group="state.groupA"
                :fallback-class="true"
                :fallback-on-body="true"
                :touch-start-threshold="50"
                :fallback-tolerance="50"
                :move="onMove"
                :sort="false"
                style="height:100%"
            >
                <template #item="{ element }">
                    <div class="item move" >
                        <label class="move">{{ element.name }}</label>
                    </div>
                </template>
            </draggable>
        
       </el-aside>
        <el-main>
            <draggable 
                :list="state.modules.arr2"
                ghost-class="ghost"
                handle=".move"
                filter=".forbid"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onStart"
                @end="onEnd"
                group="itxst"
                :fallback-class="true"
                :fallback-on-body="true"
                :touch-start-threshold="50"
                :fallback-tolerance="50"
                :move="onMove"
            >
               
                <template #item="{element }">
                    <div class="item move" @click="show(element)">
                        <el-input v-model="element.label" placeholder="字段名称"></el-input>
                        <label class="move">{{ element.name }}</label>
                    </div>
                </template>
            </draggable>
        </el-main>
    <el-aside width="200px">
         <div>{{state.currentCom.name}}</div>
         <div>{{state.currentCom.label}}</div>
         <div v-if= "state.currentCom.type == 1">
            类型1
         </div>
          <div v-else-if= "state.currentCom.type == 2">
            类型2
         </div>
         <div v-else-if= "state.currentCom.type == 3">
            类型3
         </div>
         <div v-else-if= "state.currentCom.type == 4">
            类型4
         </div>
        
    </el-aside>
  </el-container>

</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import draggable from "vuedraggable";

    const state = reactive({
        message: "A组只能往B组拖到一个元素",
        groupA: {
            name: "itxst",
            put: false, //允许拖入
            pull: 'clone'
        },
        modules: {
            arr1: [
            { name: "文本", id: 1,type: 1 },
            { name: "时间", id: 2,type: 2 },
            { name: "表单", id: 3,type: 3},
            { name: "日期", id: 4,type: 4},
            ],
            arr2: [
              { name: "日期", id: 5,type: 4},
            ],
        },
        currentCom:{}
    });

    //拖拽开始的事件
    const onStart = () => {
    console.log("开始拖拽");
    };

    //拖拽结束的事件
    const onEnd = () => {
    console.log("结束拖拽");
       console.log(state.modules.arr2);
    };

    const onMove = (e, originalEvent) => {
        //不允许停靠
        if (e.relatedContext.element.disabledPark == true) return false;

        return true;
    };

    const show = (element) => {
        console.log(element);
       state.currentCom = element;
    }

</script>

<style lang="scss" scoped>
html,body,#app {
  height: 100%;
  margin: 0;
  padding: 0;
}
.layout-container {
  height: 100%;
}

.group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  width: 32%;
  margin-right: 20px;
}
.item {
  border: solid 1px #ddd;
  padding: 0px;
  text-align: left;
  background-color: #fff;
  margin-bottom: 10px;
  display: flex;
  height: 36px;
  user-select: none;
}

.item > label {
  padding: 6px 10px;
  color: #333;
}
.item > label:hover {
  cursor: move;
}
.item > span {
  padding: 6px 10px;
  color: #666;
}
.ghost {
  border: solid 1px rgb(19, 41, 239) !important;
}
.chosenClass {
  opacity: 1;
  border: solid 1px red;
}
.fallbackClass {
  background-color: aquamarine;
}
</style>